<template>
	<!-- 弹窗外层容器，通过 v-show 控制显示隐藏，可结合动画库实现弹出动画 -->
	<view class="coupon-popup" v-if="showPopup">
		<view class="popup-content" :style="bgStyle">
			<view class="popup-title">新人专享优惠券</view>
			<view class="coupon-item" :style="couponItemStyle" v-for="(item, index) in couponList" :key="item.id"
				v-if="couponList.length>0">
				<view class="coupon-amount">
					<view class="amount-box">
						{{ item.amount }}
					</view>
					<text class="money-text">元</text>
				</view>
				<view class="line">

				</view>
				<view class="coupon-right">
					<view class="coupon-desc">{{ item.desc }}</view>
					<view class="coupon-expire">有效期至{{ item.expireDate }}</view>
				</view>
			</view>
			<view class="get-coupon-btn" :style="btnBgStyle" @click="handleGetCoupon">
				<text>立即领取</text>
			</view>

		</view>
		<view class="coupon-close-box">
			<image :src="`${$ImgBaseUrl}coupon-close.png`" mode="" class="coupon-close" @click="handleClosePopup">
			</image>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		computed
	} from 'vue';
	import {
		ImgBaseUrl
	} from "@/utils/domain.js";
	// 定义 props
	const props = defineProps({
		showPopup: {
			type: Boolean,
			required: true,
		},
		couponList: {
			type: Array,
			default: () => [],
		}
	});

	// 定义 emits
	const emit = defineEmits(['closePopup']);


	// 处理领取优惠券
	const handleGetCoupon = () => {
		// 触发自定义事件，告知父组件用户点击了领取按钮
		emit('getCoupon');
	};

	// 关闭弹窗
	const handleClosePopup = () => {
		// 向父组件传递"关闭"信号
		emit('closePopup');
	}
	const bgStyle = computed(() => ({
		backgroundImage: `url(${ImgBaseUrl}home-coupon-bg.png)`,
		backgroundSize: 'cover', // 确保图片覆盖整个区域
		backgroundRepeat: 'no-repeat', // 不重复
		backgroundPosition: 'center center', // 居中显示
	}));
	const couponItemStyle = computed(() => ({
		backgroundImage: `url(${ImgBaseUrl}home-couponItem-bg.png)`,
		backgroundSize: 'cover', // 确保图片覆盖整个区域
		backgroundRepeat: 'no-repeat', // 不重复
		backgroundPosition: 'center center', // 居中显示
	}));
	const btnBgStyle = computed(() => ({
		backgroundImage: `url(${ImgBaseUrl}home-coupon-btn.png)`,
		backgroundSize: 'cover', // 确保图片覆盖整个区域
		backgroundRepeat: 'no-repeat', // 不重复
		// backgroundPosition: 'center center', // 居中显示
	}));


	// 监听 couponList 变化（可选，如果需要处理数据）
	watch(() => props.couponList, (newVal) => {
		console.log('优惠券数据更新:', newVal);
	}, {
		immediate: true
	});
</script>

<style scoped lang="scss">
	/* 弹窗外层样式，可设置半透明背景等，实现遮罩效果 */
	.coupon-popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 99999;
		display: flex;
		flex-direction: column;
	}

	/* 弹窗内容区域样式，设置背景渐变、圆角、内边距等，贴近设计图 */
	.popup-content {
		width: 637rpx;
		min-height: 927rpx;
		padding: 20rpx;
		text-align: center;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		flex-direction: column;


	}

	/* 标题样式，调整字体大小、加粗等 */
	.popup-title {
		width: 50%;
		font-size: 28rpx;
		font-weight: bold;
		color: #792D13;
		background: #FCEEBC;
		padding: 10rpx;
		border-radius: 0rpx 0rpx 24rpx 24rpx;
		margin-top: -20rpx;
		margin-bottom: 40rpx;
		// border-radius: ;
	}

	/* 单个优惠券项样式，调整为渐变背景、圆角、间距等 */
	.coupon-item {
		width: 569rpx;
		height: 192rpx;
		margin-bottom: 20rpx;
		// padding: 20rpx;
		// border-radius: 10rpx;
		// background: linear-gradient(to right, #ff9933, #ffcc99);
		// color: #fff;
		display: flex;
		// flex-direction: column;
		// align-items: flex-start;
		box-sizing: border-box;
		align-items: center;
		padding: 0rpx 20rpx;

		.line {
			width: 1rpx;
			background-color: #fff;
			height: 53%;
			margin-left: 36rpx;
			margin-right: 44rpx;
		}

		.coupon-right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: start;
			height: 60%;

			.coupon-desc {
				font-size: 40rpx;
				// margin-bottom: 10rpx;
				font-weight: bold;
				color: #fff;
			}

			/* 优惠券有效期样式 */
			.coupon-expire {
				font-size: 24rpx;
				color: #FFD1C9;
				font-weight: 400;
			}
		}

		.coupon-amount {
			display: flex;
			// 垂直方向：让“元”靠下（与金额底部对齐）
			// align-items: flex-end;
			// 字体颜色
			color: #fff;

			.amount-box {
				// 金额的字体大小（保持原来的 98rpx）
				font-size: 98rpx;
			}

			.money-text {
				// “元”的字体大小（原来的 30rpx）
				font-size: 30rpx;
				// 让“元”在水平方向靠右侧（相对于金额）
				margin-left: 4rpx;
				// 垂直方向向下微调，和金额底部对齐
				// align-self: flex-end;
				margin-top: 73rpx;
			}
		}
	}



	/* 领取按钮样式，调整渐变、圆角等 */
	.get-coupon-btn {
		width: 500rpx;
		height: 103rpx;
		margin-top: 30rpx;
		// background: linear-gradient(to right, #ff9933, #ff6600);
		color: #FEFAF5;
		font-weight: bold;
		font-size: 54rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		// padding: 20rpx 0;
	}

	/* 添加向右的圆角白色三角形 */
	.get-coupon-btn::after {
	    content: "";
	    position: absolute;
	    right: 110rpx;
	    top: 50%;
	    transform: translateY(-50%);
	    width: 25rpx;
	    height: 25rpx;
	    background-color: #FEFAF5;
	    border-radius: 6rpx; /* 圆角 */
	    clip-path: polygon(0 0, 100% 50%, 0 100%); /* 裁剪为三角形 */
	}



	.coupon-close-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.coupon-close {
			width: 41rpx;
			height: 41rpx;
			margin-top: 30rpx;
		}
	}
</style>